<!-- 系统成本 -->
<template>
  <div class="energy_consume">
    <div class="left_tree">
      <div class="content-left">
        <div class="tree-search">
          <px-input v-model="treeSearchVal" placeholder="请输入" :prefix-icon="Search" />
        </div>
        <div class="tree-bar">
          <px-scrollbar>
            <px-tree
              ref="treeRef"
              :data="treeData"
              node-key="id"
              default-expand-all
              highlight-current
              :filter-node-method="filterNode"
              :current-node-key="currentNode"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            >
              <template #default="{ data }">
                <px-tooltip :content="data.label" placement="top" :show-after="showAfter">
                  <span :style="data.disabled ? { cursor: 'not-allowed', userSelect: 'none' } : ''">
                    {{ data.label }}
                  </span>
                </px-tooltip>
              </template>
            </px-tree>
          </px-scrollbar>
        </div>
      </div>
    </div>
    <div class="right_con">
      <systemDetail :key="sysKey" :params="paramsData" />
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ALL_ENERGY_COST_SYSTEM"
});
import { ref, watch, onMounted, nextTick, reactive, toRefs } from "vue";
import { Search } from "@px-ui/icons-vue";
import systemDetail from "./components/systemDetail.vue";
import { PxMessage } from "px-ui";
import { getLoadConsumeSystemTreeApi } from "@/api/energy/common";

const sysKey = ref(Date.now());

const paramsData = ref({});

const state = reactive({
  treeSearchVal: "",
  treeData: [],
  currentNode: "0",
  showAfter: 1000
});
const { treeSearchVal, treeData, currentNode, showAfter } = toRefs(state);

const treeRef = ref();
watch(treeSearchVal, val => {
  treeRef.value.filter(val);
});

// 过滤树数据
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.label.includes(value);
};

// 点击树节点
const handleNodeClick = data => {
  if (!data?.children?.length) {
    paramsData.value.id = data.id;
    paramsData.value.name = data.label;
    sysKey.value = Date.now();
  }
  // else {
  //   node.expanded = false;
  //   PxMessage({
  //     type: "warning",
  //     showClose: true,
  //     message: "该系统暂不计量成本"
  //   });
  //   return false;
  // }
};

const filterFirstNode = node => {
  if (!node.children || node.children.length === 0) {
    return node;
  }
  for (const child of node.children) {
    const result = filterFirstNode(child);
    if (result) {
      return result;
    }
  }
  return null;
};

const getTreeData = async () => {
  try {
    const params = {
      code: "system"
    };
    const res = await getLoadConsumeSystemTreeApi(params);
    if (res?.length) {
      res[0].flag = "quanchang";
      res[0]?.children?.forEach(i => {
        let flag = i?.id;
        addPropertyToLeafNodes(i, flag);
      });
      let resAry = res;
      state.treeData = resAry;
      nextTick(() => {
        let oneNode = resAry[0].children[0].children[0].children[0].children[0];
        currentNode.value = oneNode.id;
        treeRef.value.setCurrentKey([oneNode.id]);
        paramsData.value.id = oneNode.id;
        paramsData.value.name = oneNode.label;
        sysKey.value = Date.now();
      });
    }
    console.log("res---system", res);
  } catch (error) {
    console.log(error);
  }
};

// 递归函数，用于给叶子节点添加属性
const addPropertyToLeafNodes = (node, args) => {
  if (!node?.children || node?.children?.length === 0) {
    // 是叶子节点，添加属性
    node.flag = args;
    node.disabled = false;
  } else {
    node.flag = args;
    node.disabled = true;
    // 不是叶子节点，递归遍历子节点
    node?.children?.forEach(child => {
      addPropertyToLeafNodes(child, args);
    });
  }
  return node;
};

onMounted(() => {
  getTreeData();
});
</script>

<style lang="scss" scoped>
.energy_consume {
  display: flex;

  .left_tree {
    width: 310px;
    padding: 16px 24px;
    margin-right: 16px;
    background-color: #fff;
    border-radius: 4px;

    /*
    * tab样式
    */
    .tabSwitch {
      padding: 4px;
      background-color: #f4f4f4;
      border-radius: 4px;

      :deep(.px-radio-button__inner) {
        background-color: #f4f4f4;
        border: none;
      }

      :deep(.is-active) {
        border: none;

        .px-radio-button__inner {
          background-color: var(--px-color-primary);
          border-radius: 4px;
        }
      }
    }

    .content-left {
      .tree-title {
        padding: 8px 8px 0;
        font-size: 14px;
        font-weight: bold;
      }

      .tree-search {
        padding: 8px;
      }

      .tree-bar {
        width: 100%;
        height: calc(100vh - 250px);
        overflow-y: auto;
      }
    }
  }

  .right_con {
    display: flex;
    flex: 1;
    flex-flow: column;
    width: calc(100% - 326px);
    // gap: 16px;

    .px-form-item {
      margin-bottom: 0;
    }

    .consume_all_cost {
      width: 100%;
      min-width: 1000px;
      height: 314px;
    }

    .echarts_btn {
      width: 100%;
      min-width: 1000px;
      height: 340px;
      margin-top: 16px;
    }
  }
}
</style>
